.rotate-animated {
    -webkit-animation: rotate 4s linear infinite;
    -moz-animation: rotate 4s linear infinite;
    animation: rotate 4s linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.shake-item {
    -webkit-animation: bell-shake 40s ease infinite;
    -moz-animation: bell-shake 40s ease infinite;
    animation: bell-shake 40s ease infinite;
}

@-webkit-keyframes bell-shake {
    1% {
        -webkit-transform: rotateZ(15deg);
        transform-origin: 50% 0%;
    }

    2% {
        -webkit-transform: rotateZ(-15deg);
        transform-origin: 50% 0%;
    }

    3% {
        -webkit-transform: rotateZ(20deg);
        transform-origin: 50% 0%;
    }

    4% {
        -webkit-transform: rotateZ(-20deg);
        transform-origin: 50% 0%;
    }

    5% {
        -webkit-transform: rotateZ(15deg);
        transform-origin: 50% 0%;
    }

    6% {
        -webkit-transform: rotateZ(-15deg);
        transform-origin: 50% 0%;
    }

    7% {
        -webkit-transform: rotateZ(0);
        transform-origin: 50% 0%;
    }

    100% {
        -webkit-transform: rotateZ(0);
        transform-origin: 50% 0%;
    }
}

// router-animation 

.route-enter-from {
    opacity: 0;
    transform: translateY(100px);
}

.route-enter-active {
    transition: all 0.3s ease-out;

}

.route-leave-to {
    opacity: 0;
    transform: translateY(-100px);
}

.route-leave-active {
    transition: all 0.3s ease-in;
}